<template>
	<view class="w-100">
		<view class="flex-1 pb-2" style="background-color: #1ba3f8;">
			<view class="flex-1" :style="'height:' + statusBarHeight + 'px;'"></view>
			<view class="flex-1 row">
				<text class="font-s-4 font-w text-white">伊兰朵商学院</text>
			</view>
			<view class="flex-1 mx-3 mt-2">
				<view class="flex-1 search-box row text-muted" @click="toMore">
					<view class="iconfont icon-sousuo"></view>
					<view class="font-s-3 ml-2">搜索学院内容</view>
				</view>
			</view>
		</view>
		<view class="flex-1 mx-3 mt-2">
			<swiper :indicator-dots="true" indicator-active-color="rgba(26,201,252,.3)" :autoplay="true"
				:interval="3000" :duration="1000" class="swiper-box">
				<swiper-item class="swiper-box" v-for="(item,index) in schoolswiperList" :key="index">
					<image class="swiper-box" :src="item.cover_image" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="nav-box row-ac mt-3 flex-1 mx-2">
			<view class="nav-item row-a-j-fc" v-for="(item,index) in navItem" :key="index" @click="navTo(item.url)">
				<view class="iconfont" :class="item.icon" :style="'color:' + item.color"></view>
				<view class="font-s-3 mt-1">{{ item.name }}</view>
			</view>
		</view>
		<view class="flex-1 mt-2 row">
			<view class="">————</view>
			<view class="mx-1">金牌讲师</view>
			<view>————</view>
		</view>
		<view class="flex-1 mx-3 mt-2">
			<scroll-view scroll-x class="scroll-row p-1 ">
				<view class="scroll-row-item lecturer-item" v-for="(item, index) in lecturerList" :key="index">
					<image :src="item.cover_image" class="lecturer-img" mode=""></image>
					<view class="flex-1 mt-1 row font-s-3">
						{{ item.name }}
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="flex-1 mx-3 mt-3">
			<view class="row-ac-sb">
				<view class="font-s-35 font-w">素材</view>
				<view class="font-s-2 text-muted row-ac" @click="navTo('/pages/school/curriculum-more')">更多<text class="iconfont icon-next-01" style="font-size: 15rpx;"></text></view>
			</view>
			<view class="flex-1 mt-2 material-box row-ac-fw">
				<view class="material-item" v-for="(item,index) in materials" :key="index">
					
				</view>
				
			</view>
		</view>
		<view class="flex-1 mx-3 mt-3">
			<view class="row-ac-sb">
				<view class="font-s-35 font-w">精选课程</view>
				<view class="font-s-2 text-muted row-ac" @click="navTo('/pages/school/curriculum-more')">更多<text class="iconfont icon-next-01" style="font-size: 15rpx;"></text></view>
			</view>

			<view class="flex-1 mt-2 curriculum-box">
				<view class="curriculum-item flex-1 border-bottom d-f py-3" v-for="(item, index) in curriculumList"
					:key="index" @click="toCurriculum(item.id)">
					<image :src="item.cover_image" class="curriculum-img" mode=""></image>
					<view class="flex-1 mx-3 mt-1">
						<view class="font-s-4 font-w">{{ item.curriculum_name }}</view>
						<view class="row-ac text-muted font-s-2 mt-1">老师：{{ item.lecturer_name }}</view>
						<view class="row-ac text-muted font-s-2 mt-3">{{ item.create_time }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		lecturerListUrl,
		schoolswiperListUrl,
		curriculumListUrl
	} from "@/api/index.js"
	export default {
		data() {
			return {
				statusBarHeight: '',
				navItem: [{
						id: 0,
						name: '课程',
						icon: 'icon-kechengchakan',
						color: '#1ba3f8',
						url:'/pages/school/curriculum-more'
					},
					{
						id: 1,
						name: '素材',
						icon: 'icon-sucai2',
						color: '#febc0f',
						url:'/pages/school/curriculum-more'
					},
					{
						id: 2,
						name: '课件',
						icon: 'icon-kejian',
						color: '#f48413'
					},
					{
						id: 3,
						name: '日报',
						icon: 'icon-renwu1',
						color: '#fd3f5d'
					}
				],
				schoolswiperList: [],
				lecturerList: [],
				curriculumList: [],
				materials:[
					{
						id:1,
						name:'hhdhdhd'
					},
					{
						id:1,
						name:'hhdhdhd'
					},
					{
						id:1,
						name:'hhdhdhd'
					},
					{
						id:1,
						name:'hhdhdhd'
					}
				]
				
			}
		},
		created() {
			this.$getScreenInfo().then(res => {
				this.statusBarHeight = res.statusBarHeight + 5
				this.windowHeight = res.windowHeight
			})
			this.getLecturerList()
			this.getSchoolswiperListList()
			this.getCurriculumList()
		},
		methods: {
			getLecturerList() {
				this.$R.get(lecturerListUrl).then(res => {
					if (res.code == 200) {
						this.lecturerList = res.data.list
					}
				})
			},
			getSchoolswiperListList() {
				this.$R.get(schoolswiperListUrl).then(res => {
					if (res.code == 200) {
						this.schoolswiperList = res.data.list
						console.log('111', this.schoolswiperList);
					}
				})
			},
			getCurriculumList() {
				this.$R.get(curriculumListUrl).then(res => {
					if (res.code == 200) {
						this.curriculumList = res.data.list
					}
				})
			},
			toCurriculum(curriculumId) {
				uni.navigateTo({
					url: '/pages/school/curriculum?curriculumId=' + curriculumId,
				});
			},
			navTo(url){
				uni.navigateTo({
					url: url
				});
			}
		},

	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.search-box {
		height: 62rpx;
		border-radius: 29rpx;
		background-color: #fff;
	}

	.nav-item {
		width: 25%;
		height: 160rpx;

		.iconfont {
			font-size: 72rpx;
		}
	}

	.swiper-box {
		width: 100%;
		height: 380rpx;
		border-radius: 15rpx;

	}

	.lecturer-item {
		width: 200rpx;
		height: 318rpx;
		//box-shadow: 2rpx 2rpx 15rpx #e6e6e6;
		border: 1rpx solid #e6e6e6;
		margin-right: 20rpx;
		border-radius: 6rpx;
		background-color: #fff;

		.lecturer-img {
			width: 200rpx;
			height: 248rpx;
		}
	}

	.curriculum-box {
		box-shadow: 2rpx 2rpx 15rpx #e6e6e6;
		border-radius: 20rpx 20rpx 0 0;
	}

	.curriculum-item {
		.curriculum-img {
			width: 158rpx;
			height: 198rpx;
		}
	}
	.material-item{
		width: 330rpx;
		height: 368rpx;
		box-shadow: 2rpx 2rpx 15rpx #e6e6e6;
		border-radius: 8rpx;
		margin-right: 20rpx;
		margin-bottom: 28rpx;
		.material-img{
			width: 330rpx;
			height: 330rpx;
			border-radius: 8rpx 8rpx 0 0;
		}
		&:nth-child(2n){
			margin-right: 0;
		}
	}
</style>